<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入api
import { queryCustomer } from "@/api/customer.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
const router = useRouter();

function add() {
  router.push("/customer/add");
}

//表格数据
const tableData = ref([{}]);

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//过滤条件
const filters = ref({
  company: "",
  contactName:""
})


//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}
//重置
function reset(){
  (filters.value.company = ""),
    (filters.value.contactName = "");
}
//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    company: filters.value.company,
    contactName:filters.value.contactName
  };
  let res = await queryCustomer(data);
  if (res.code == 200) {
    tableData.value = res.data.data;

    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}
//修改
function update(id) {
  router.push({ path: "/customer/update", query: { id } });
}
//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<template>
  <div>
  <el-form>
      <el-row style="margin-top: 30px" >
        <el-col style="padding-left: 20px" :span="6">
          <el-form-item label="客户公司">
            <el-input placeholder="请输入"  v-model="filters.company"/>
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 20px" :span="6">
          <el-form-item label="联系人">
          <el-input placeholder="请输入"  v-model="filters.contactName" />
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 20px" :span="6">
          <el-button type="primary" @click="initData">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>

  </el-form>
  <div>
    <div>
      <el-button type="primary" style="float: right" @click="add"
        >添加</el-button
      >
    </div>
    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        type="index"
        label="行号"
        width="70"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="company"
        label="客户公司名称"
        width="150"
        header-align="center"
      />
      <el-table-column
        prop="contactName"
        label="联系人"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="mobile"
        label="联系方式"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="market"
        label="市场"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="customer_type"
        label="客户类型"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="customer_email"
        label="邮箱"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="createdTime"
        label="创建时间"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="saleId"
        label="所属销售"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="source"
        label="来源"
        width="120"
        header-align="center"
      />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            title="修改"
            @click="update(row.id)"
          />
          <el-button type="primary">下单记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
  </div>
</template>

<style scoped lang="scss"></style>
